<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/style/admin.css" media="all">
</head>

<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">设备台账</div>
                <div class="layui-card-body">
                    <div style="margin-bottom: 10px;">
                        <div class="layui-input-item" style="float:left;padding-right:10px;">
                            <form class="layui-form">
                                <div class="layui-inline" style="width:130px;">
                                    <input id="search-name" type="text" placeholder="请输入设备名称"
                                           class="layui-input layui-input-search">
                                </div>
                                <div class="layui-inline" style="width:130px;">
                                    <input id="search-code" type="text" placeholder="请输入设备编码"
                                           class="layui-input layui-input-search">
                                </div>
                                <div class="layui-inline" style="width:130px;">
                                    <input id="search-no" type="text" placeholder="请输入设备代号"
                                           class="layui-input layui-input-search">
                                </div>
                                <div class="layui-inline" style="width:130px;">
                                    <input id="search-brand" type="text" placeholder="请输入品牌"
                                           class="layui-input layui-input-search">
                                </div>
                                <div class="layui-inline" style="width:130px;">
                                    <input id="search-model" type="text" placeholder="请输入型号"
                                           class="layui-input layui-input-search">
                                </div>
                                <div class="layui-inline" style="width:130px;">
                                    <input id="search-spec" type="text" placeholder="请输入规格"
                                           class="layui-input layui-input-search">
                                </div>
                                <div class="layui-inline" style="width:130px;">
                                    <select id="search-system" lay-search>
                                        <option value="">选择设备系统</option>
                                    </select>
                                </div>
                                <div class="layui-inline" style="width:130px;">
                                    <select id="search-type" lay-search>
                                        <option value="">选择设备类型</option>
                                    </select>
                                </div>
                                <div class="layui-inline" style="width:130px;">
                                    <select id="search-tunnel" lay-filter="search-tunnel" lay-search>
                                        <option value="">请选择建筑群</option>
                                    </select>
                                </div>
                                <div class="layui-inline" style="width:130px;">
                                    <select id="search-location" lay-search>
                                        <option value="">请选择区域</option>
                                    </select>
                                </div>
                                <div class="layui-inline" style="width:130px;">
                                    <select id="search-is-iot">
                                        <option value="">物联设备</option>
                                        <option value="1">是</option>
                                        <option value="0">否</option>
                                    </select>
                                </div>
                                <div class="layui-inline" style="width:130px;">
                                    <select id="search-state">
                                        <option value="">设备状态</option>
                                        <option value="0">禁用</option>
                                        <option value="1">运行</option>
                                        <option value="2">维修</option>
                                    </select>
                                </div>
                                <div class="layui-inline" style="width:130px;">
                                    <input id="product-range" type="text" placeholder="选择生产日期范围"
                                           class="layui-input">
                                </div>
                                <div class="layui-inline" style="float:right;">
                                    <a id="btn-search" class="layui-btn">查找</a>
                                    <a id="btn-add" class="layui-btn">添加</a>
                                    <a id="tpl-btn" class="layui-btn layui-btn-primary">模板</a>
                                    <a id="import-btn" class="layui-btn layui-btn-primary">导入</a>
                                    <a id="export-btn" class="layui-btn layui-btn-primary">导出</a>
                                    <a id="btn-batch-delete" class="layui-btn layui-btn-danger">删除</a>
                                    <a id="btn-refresh" class="layui-btn layui-btn-primary">刷新</a>
                                </div>
                            </form>
                        </div>
                       <!-- <div>
                            <a id="btn-search" class="layui-btn">查找</a>
                            <a id="btn-add" class="layui-btn">添加</a>
                            <a id="tpl-btn" class="layui-btn layui-btn-primary">模板</a>
                            <a id="import-btn" class="layui-btn layui-btn-primary">导入</a>
                            <a id="export-btn" class="layui-btn layui-btn-primary">导出</a>
                            <a id="btn-batch-delete" class="layui-btn layui-btn-danger">删除</a>
                            <a id="btn-refresh" class="layui-btn layui-btn-primary">刷新</a>
                        </div>-->
                        <div style="clear:both;"></div>
                    </div>
                    <table class="layui-hide" id="device-table" lay-filter="device-table"></table>
                    <script type="text/html" id="toolbar-operation">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">详情</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                        <!-- <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="qrcode">二维码</a> -->
                        <!--{{#  if(d.isIot == 1){ }}
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="iot">物联</a>
                        {{#  } }}-->
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="device-form">
    <div class="layui-card">
        <div class="layui-card-header">设备详情</div>
        <div class="layui-card-body">
            <form class="layui-form" action="#" lay-filter="device-form">
                <input type="hidden" name="id">
                <div class="layui-form-item">
                    <label class="layui-form-label">*设备名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" class="layui-input" lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">设备简称</label>
                    <div class="layui-input-block">
                        <input type="text" name="abbr" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">设备编码</label>
                    <div class="layui-input-block">
                        <input type="text" name="code" class="layui-input" placeholder="不填由系统生成">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">设备代号</label>
                    <div class="layui-input-block">
                        <input type="text" name="no" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">设备类型</label>
                    <div class="layui-input-block">
                        <select id="type" name="type" lay-filter="type">
                            <option value="">选择类型</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">*建筑群</label>
                    <div class="layui-input-block">
                        <select id="tunnelId" name="tunnelId" lay-filter="tunnelId" lay-verify="required" lay-search>
                            <option value="">选择隧道</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">*区域</label>
                    <div class="layui-input-block">
                        <select id="locationId" name="locationId" lay-filter="locationId"
                                lay-verify="required" lay-search>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">设备系统</label>
                    <div class="layui-input-block">
                        <select id="system" name="system" lay-filter="system">
                            <option value="">选择系统</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">品牌</label>
                    <div class="layui-input-block">
                        <input type="text" name="brand" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">型号</label>
                    <div class="layui-input-block">
                        <input type="text" name="model" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">规格</label>
                    <div class="layui-input-block">
                        <input type="text" name="spec" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">出厂编号</label>
                    <div class="layui-input-block">
                        <input type="text" name="productNo" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">生产日期</label>
                    <div class="layui-input-block">
                        <input id="product-date" type="text" name="productDate" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">使用年限</label>
                    <div class="layui-input-block">
                        <input type="number" name="serviceYears" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                        <input type="text" name="note" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">物联设备</label>
                    <div class="layui-input-block">
                        <select name="isIot">
                            <option value="">是否物联设备</option>
                            <option value="1">是</option>
                            <option value="0">否</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="form-submit">确定</button>
                </div>
                <div style="height:200px;"></div>
            </form>
        </div>
    </div>
</script>
<script src="/layui/layui.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.qrcode.min.js"></script>
<script src="/js/common.js"></script>
<script>
    layui.config({
        base: '/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'form', 'upload', 'laydate'], function () {
        var $ = layui.$;
        var table = layui.table;
        var form = layui.form;
        var admin = layui.admin;
        var upload = layui.upload;
        var laydate = layui.laydate;
        var popupIndex;

        laydate.render({
            elem: '#product-range',
            range: true
        });

        laydate.render({
            elem: '#product-date',
            type: 'date'
        });

        function showQRCode(qrcode) {
            $('#qrcode').empty();
            $('#qrcode').qrcode(qrcode);
            layer.open({
                type: 1,
                shade: false,
                title: false,
                content: $('#qrcode'),
            });
        }

        loadDeviceSystems(function (result) {
            for (var i in result) {
                var item = result[i];
                $('#search-system').append('<option value="' + item.name + '">' + item.name + '</option>');
            }
            form.render();
        });

        loadDeviceTypes(function (result) {
            for (var i in result) {
                var item = result[i];
                $('#search-type').append('<option value="' + item.name + '">' + item.name + '</option>');
            }
            form.render();
        });

        loadTunnels(function (result) {
            for (var i in result) {
                var item = result[i];
                $('#search-tunnel').append('<option value="' + item.id + '">' + item.name + '</option>');
            }
            form.render();
        });

        form.on('select(search-tunnel)', function (data) {
            loadLocations(data.value, function (res) {
                $('#search-location').empty();
                $('#search-location').append('<option value="">选择位置</option>');
                res.forEach(function (item) {
                    $('#search-location').append('<option value="' + item.id + '">' + item.name + '</option>');
                });
                form.render();
            });
        });

        function loadTunnels(callback) {
            $.get('tunnels', function (result) {
                if (callback) {
                    callback(result.data);
                }
            });
        }

        function loadLocations(tunnelId, callback) {
            $.get('locations/', {tunnelId}, function (result) {
                if (callback) {
                    callback(result.data);
                }
            });
        }

        function loadDeviceSystems(callback) {
            $.get('/device-systems', function (result) {
                if (callback) {
                    callback(result.data);
                }
            });
        }

        function loadDeviceTypes(callback) {
            $.get('/device-types', function (result) {
                if (callback) {
                    callback(result.data);
                }
            });
        }

        table.render({
            elem: '#device-table',
            url: 'devices',
            where: {
                tunnelId: $('#search-tunnel').val(),
                name: $('#search-name').val(),
                code: $('#search-code').val(),
                system: $('#search-system').val(),
                type: $('#search-type').val(),
                isIot: $('#search-is-iot').val(),
                state: $('#search-state').val(),
                no: $('#search-no').val(),
                brand: $('#search-brand').val(),
                model: $('#search-model').val(),
                spec: $('#search-spec').val(),
                productRange: $('#product-range').val()
            },
            title: '',
            skin: 'line',
            cols: [[
                {type: 'checkbox'},
                {
                    title: '序号', width: 60, templet: function (d) {
                        return d.LAY_TABLE_INDEX + 1;
                    }
                },
                {field: 'abbr', title: '设备简称'},
                {field: 'code', title: '设备编码'},
                {field: 'no', title: '设备代号'},
                {field: 'system', title: '设备系统'},
                {field: 'type', title: '设备类型'},
                {field: 'tunnelName', title: '建筑群'},
                {field: 'locationName', title: '区域简称'},
                {field: 'iotText', title: '物联设备'},
                {field: 'stateText', title: '设备状态'},
                {field: 'serviceYears', title: '使用年限'},
                {fixed: 'right', title: '操作', width: 120, toolbar: '#toolbar-operation'}
            ]],
            page: true
        });

        upload.render({
            elem: '#import-btn',
            url: 'devices/import',
            auto: true,
            size: 2048,
            accept: 'file',
            exts: 'xlsx',
            before: function () {
                layer.load();
            },
            done: function (result) {
                layer.closeAll('loading');
                if (result.msg) {
                    layer.alert(result.msg, {
                        area: '800px',
                        skin: 'layui-layer-molv'
                    });
                } else {
                    layer.msg('导入成功');
                }
                search();
            }
        });

        function addDeviceForm() {
            popupIndex = admin.popupRight({
                area: '360px',
                success: function () {
                    var formHtml = $('#device-form').html();
                    $('#' + this.id).html(formHtml);
                    laydate.render({
                        elem: '#product-date',
                        type: 'date'
                    });
                    loadTunnels(function (res) {
                        res.forEach(function (item) {
                            $('#tunnelId').append('<option value="' + item.id + '">' + item.name + '</option>');
                        });
                        form.render();
                        form.on('select(tunnelId)', function (data) {
                            loadLocations(data.value, function (res) {
                                $('#locationId').empty();
                                $('#locationId').append('<option value="">选择位置</option>');
                                res.forEach(function (item) {
                                    $('#locationId').append('<option value="' + item.id + '">' + item.name + '</option>');
                                });
                                form.render();
                            });
                        });
                    });
                    loadDeviceTypes(function (res) {
                        res.forEach(function (item) {
                            $('#type').append('<option value="' + item.name + '">' + item.name + '</option>');
                        });
                        form.render();
                    });
                    loadDeviceSystems(function (res) {
                        res.forEach(function (item) {
                            $('#system').append('<option value="' + item.name + '">' + item.name + '</option>');
                        });
                        form.render();
                    });
                }
            });
        }

        function showDeviceForm(data) {
            layer.open({
                title: data.name,
                type: 2,
                content: 'device-info.html?id=' + data.id,
                area: ['1200px', '720px'],
                maxmin: true
            });
        }

        function closePopupForm() {
            if (popupIndex) {
                layer.close(popupIndex);
            }
        }

        function search() {
            table.reload('device-table', {
                where: {
                    tunnelId: $('#search-tunnel').val(),
                    name: $('#search-name').val(),
                    code: $('#search-code').val(),
                    system: $('#search-system').val(),
                    type: $('#search-type').val(),
                    isIot: $('#search-is-iot').val(),
                    state: $('#search-state').val(),
                    no: $('#search-no').val(),
                    brand: $('#search-brand').val(),
                    model: $('#search-model').val(),
                    spec: $('#search-spec').val(),
                    productRange: $('#product-range').val()
                },
                page: {
                    curr: 1
                }
            });
        }

        $(document).on('keypress', function (e) {
            if (e.which == 13) {
                search();
            }
        });

        $("#btn-search").on('click', function () {
            search();
        });

        $("#btn-add").on('click', function () {
            if (checkGuest()) {
                return false;
            }
            addDeviceForm();
        });

        $("#tpl-btn").on('click', function () {
            window.open("/tpl/device.xlsx");
        });

        $("#export-btn").on('click', function () {
            window.open("devices/export");
        });

        $("#btn-refresh").on('click', function () {
            table.reload('device-table');
            layer.msg('表格已刷新');
        });

        $("#btn-batch-delete").on('click', function () {
            layer.confirm('确定要删除吗?', {icon: 3, title: '提示'}, function (index) {
                var ids = [];
                var data = table.checkStatus('device-table').data;
                for (let i in data) {
                    ids.push(data[i].id);
                }
                $.ajax({
                    url: 'devices/' + ids.toString(),
                    type: 'DELETE',
                    success: function (result) {
                        if (result.code == 200) {
                            layer.msg('删除成功');
                            table.reload('device-table');
                        } else {
                            layer.msg('删除失败');
                        }
                    }
                });
            });
        });

        $("#btn-batch-delete").on('click', function () {
            layer.confirm('确定要删除吗?', {icon: 3, title: '提示'}, function (index) {
                var ids = [];
                var data = table.checkStatus('device-table').data;
                for (let i in data) {
                    ids.push(data[i].id);
                }
                $.ajax({
                    url: 'devices/' + ids.toString(),
                    type: 'DELETE',
                    success: function (result) {
                        if (result.code == 200) {
                            layer.msg('删除成功');
                            table.reload('device-table');
                        } else {
                            layer.msg('删除失败');
                        }
                    }
                });
            });
        });

        table.on('tool(device-table)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                if (checkGuest()) {
                    return false;
                }
                layer.confirm('真的删除该记录吗？', function (index) {
                    $.ajax({
                        url: 'devices/' + data.id,
                        type: 'DELETE',
                        success: function (result) {
                            if (result.code == 200) {
                                layer.msg('删除成功');
                                table.reload('device-table');
                            } else {
                                layer.msg('删除失败');
                            }
                        }
                    });
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                showDeviceForm(data);
            } else if (obj.event === 'qrcode') {
                showQRCode('device:' + data.code);
            } else if (obj.event === 'iot') {
                layer.open({
                    title: '物联设备详情',
                    type: 2,
                    content: 'https://tunnel.memanager.cn/dev/device-info.html?code=' + data.code,
                    area: ['1200px', '680px'],
                    maxmin: true
                });
            }
        });

        form.on('submit(form-submit)', function (data) {
            if (checkGuest()) {
                return false;
            }

            $.ajax({
                url: 'devices',
                type: 'PUT',
                data: data.field,
                success: function (result) {
                    if (result.code == 200) {
                        layer.msg('操作成功');
                        table.reload('device-table');
                    } else {
                        layer.msg('提交失败');
                        console.error('提交失败');
                    }
                }
            });
            closePopupForm();
            return false;
        });
    });
</script>
</body>
<div style="display: none;padding: 20px;" id="qrcode"></div>

</html>